<template>
  <div class="team-member-wrap">
    <div class="team-membersbox">
      <div class="team-members-left">
        <p class="team-members-people">团队成员：<span>{{totalMember}}</span>人</p>
        <ul class="data-list">
          <li class="item" v-for="(item, index) in membersData" :key="index">
            <div class="tag">
              <img :src="item.headImage" @click="goToCommunityFun(item.id)">
              <div class="tag-right">
                <div class="tag-right-box">
                  <h4 @click="goToCommunityFun(item.id)">{{item.username}}</h4>
                  <div v-if="obtainStatebtn" class="according-difference" @click="deleteMemberFun(item.id)">
                    <img src="@/common/image/delete-members.png" alt="">
                  </div>
                </div>
                <p>@{{item.account}}</p>
              </div>
            </div>
          </li>
        </ul>
        <div class="loadmore" v-if="hasNextPage">
          <p class="loadmore-box" @click="loadMore">
            <i v-show="loadingMore" class="el-icon-loading"></i>
            <span v-show="!loadingMore">加载更多...</span>
          </p>
        </div>
        <div class="no-data-box" v-show="membersData.length === 0">
          <div class="no-data">
            <img src="@/common/image/nocontent.png">
            <p class="no-data-title">暂无数据</p>
          </div>
        </div>
      </div>
      <div class="team-members-right">
        <div class="team-members-right-box">
          <div class="team-members-right-head">
            <i class="icon icon-notice"></i>
            <span class="team-members-right-head-text">通知</span>
            <div @click="editorNoticeFun" v-if="obtainStatebtn" v-show="!editorNotice">
              <img src="@/common/image/change-team-notice-ico.png" alt="">
            </div>
          </div>
          <el-input
            v-if="editorNotice"
            type="textarea"
            rows=4
            resize="none"
            class="notice-input"
            maxlength="200"
            placeholder="请输入内容"
            v-model="textnotice">
          </el-input>
          <p v-else>
            {{noticeCon?noticeCon:"暂无"}}
          </p>
          <div class="notice-btn" v-if="editorNotice">
            <div
              class="notice-btn-cancel"
              @mouseover="noticeMoveFun"
              @mouseout="noticeMoveOutFun"
              @click="noticeCancelFun">
              <el-button type="info" class="" plain :class="{'notice-btn-active':noticeBtnMove}">取消</el-button>
            </div>
            <div
              class="notice-btn-determine"
              @click="updateNotice">
              <el-button type="info" plain :class="{'notice-btn-active':!noticeBtnMove}">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMemberDetail, getTeamDetail, updateNotice, deleteMember } from '@/api/team_list'
import qs from 'qs'

export default {
  data () {
    return {
      // 是否有下一页
      hasNextPage: false,
      // 成员信息
      membersData: [],
      // 修改后通知内容
      textnotice: '',
      // 修改判断
      editorNotice: false,
      // 移入样式
      noticeBtnMove: false,
      // 当前通知
      noticeCon: '',
      teamUserId: '',
      pageNumber: 1,
      pageSize: 30,
      bottom: false,
      finished: false,
      // 是否使当前团队成员
      teamMembersJudge: true,
      // 身份识别
      obtainStatebtn: false,
      // 团队成员人数
      totalMember: '_',
      // Loading
      loadingMore: false,
      memberemailform: {
        email: ''
      }
    }
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.teamUserId = this.$route.query.id
    this._getTeamDetail()
    this._getMemberDetail()
    this.obtainState()
  },
  methods: {
    // 获取身份
    obtainState () {
      if (this.$route.query.role === '1' || this.$route.query.role === 1) {
        this.obtainStatebtn = true
      } else {
        this.obtainStatebtn = false
      }
    },
    // 打开社区个人中心
    goToCommunityFun (peopleid) {
      window.open(`https://forum.bitahub.com/views/usercenter.html?userId=${peopleid}`)
    },
    // 删除成员
    deleteMemberFun (membersid) {
      this.$confirm('确定删除该成员?', '消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._deleteMember(membersid)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 团队成员加载更多
    loadMore () {
      this.loadingMore = true
      this.pageNumber++
      if (this.teamMembersJudge) {
        this._getMemberDetail()
      }
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    // 修改通知点击事件
    updateNotice () {
      this._updateNotice()
    },
    // 点击修改按钮
    editorNoticeFun () {
      this.editorNotice = true
    },
    // 团队list移入事件
    noticeMoveFun () {
      this.noticeBtnMove = true
    },
    // 团队list移出事件
    noticeMoveOutFun () {
      this.noticeBtnMove = false
    },
    // 取消修改通知点击按钮
    noticeCancelFun () {
      this.noticeBtnMove = false
      this.editorNotice = false
    },
    // 查询成员列表
    _getMemberDetail () {
      let data = qs.stringify({
        teamId: this.$route.query.id,
        currentPage: this.pageNumber,
        pageSize: this.pageSize
      })
      this.finished = true
      getMemberDetail(data).then(res => {
        if (res.message.code === 0) {
          this.loadingMore = false
          this.hasNextPage = res.data.hasNextPage
          this.totalMember = res.data.total
          this.membersData = this.membersData.concat(res.data.list)
          if (this.hasNextPage) {
            this.finished = false
          }
        }
      })
    },
    // 通知修改
    _updateNotice () {
      let data = qs.stringify({
        teamId: this.$route.query.id,
        notice: this.textnotice
      })
      updateNotice(data).then(res => {
        this.editorNotice = false
        if (res.message.code === 0) {
          this.$message({ message: '修改成功', showClose: true, type: 'success' })
          this._getTeamDetail()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 通知获取
    _getTeamDetail () {
      let data = qs.stringify({
        teamId: this.$route.query.id
      })
      getTeamDetail(data).then(res => {
        if (res.message.code === 0) {
          this.noticeCon = res.data.notice
          this.textnotice = this.noticeCon
        } else if (res.message.code === 20005) {
          this.teamMembersJudge = false
        }
      })
    },
    // 删除成员
    _deleteMember (membersid) {
      let data = qs.stringify({
        teamId: this.$route.query.id,
        userId: membersid
      })
      deleteMember(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '成功删除该成员', showClose: true, type: 'success' })
          this.membersData = []
          this.pageNumber = 1
          this._getMemberDetail()
        } else {
          this.$message({ message: res.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        this.loadingMore = true
        this.pageNumber++
        if (this.teamMembersJudge) {
          this._getMemberDetail()
        }
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus">
team-item-style()
  word-break break-all
  word-wrap break-word
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  /*! autoprefixer: off */
  -webkit-box-orient vertical
  /* autoprefixer: on */
  -webkit-line-clamp 1
$fontcolor = #2D323B
.team-member-wrap
  position relative
  .team-membersbox
    display flex
    flex-wrap wrap
    justify-content space-between
    align-items flex-start
    padding 8px 0px
    .team-members-left
      width 865px
      .team-members-people
        font-size 14px
        line-height 20px
        color #57606A
        margin-bottom 15px
        span
          color #66baff
      .no-data-box
        background #ffffff
        border none
    .team-members-right
      width 295px
      box-sizing border-box
      background #F4F7F8
      .team-members-right-box
        background url(../../common/image/team-notice-bg.png) no-repeat
        background-size 153px 143px
        background-position 0% 0%
        padding 43px 31px 50px 31px
        p
          font-size 14px
          line-height 20px
          color $fontcolor
          word-wrap:break-word
        .notice-input
          .el-textarea__inner
            padding 16px 22px
        .notice-btn
          display flex
          justify-content flex-end
          margin-top 16px
          .el-button
            padding 2px 13px
            line-height 20px
            font-size 14px
            color $fontcolor
            background transparent
            border none
          .notice-btn-active
            background #E2E3E3
            border-radius 4px
          .notice-btn-determine
            margin-left 2px
        .team-members-right-head
          display flex
          align-items center
          font-size 16px
          line-height 22px
          color $fontcolor
          margin-bottom 22px
          .team-members-right-head-text
            font-weight bold
            font-family PingFangSC-Medium
          .icon
            display inline-block
            width 22px
            height 22px
            margin-right 10px
          .icon-notice
            background url(../../common/image/team-notice-ico.png) no-repeat center
            background-size 22px 22px
          div
            flex 1
            text-align right
            img
              width 14px
              height 14px
              cursor pointer
    .data-list
      display flex
      flex-wrap wrap
      justify-content flex-start
      .item
        width 188px
        height 42px
        transition all 0.2s linear
        margin-bottom 44px
        margin-right 50px
        .tag
          display flex
          transition all 0.3s ease-in-out
          .tag-right
            width 124px
            p
              team-item-style(1)
              font-size 14px
              line-height 20px
              color #666666
            .tag-right-box
              display flex
              justify-content space-between
              h4
                team-item-style(1)
                font-size 14px
                line-height 20px
                color $fontcolor
                width 100px
                max-height 20px
                overflow hidden
                cursor pointer
                font-weight bold
              div
                width 10px
                height 10px
                margin-top 4px
                cursor pointer
                opacity 0
                img
                  width 10px
                  height 10px
          >img
            width 33px
            height 33px
            margin-top 4px
            background-size 33px 33px
            margin-right 11px
            cursor pointer
        .tag:hover .tag-right .tag-right-box div
          opacity 1
</style>
